import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import PropTypes from 'prop-types';
import { Step, Grid, Input, Button, Feedback } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;
const telPattern = /^(1[\d]{1}[\d]{9})|(((400)-(\d{3})-(\d{4}))|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$|^([ ]?)$/;

export default class RegisterForm extends Component {
  static displayName = 'RegisterForm';


  static defaultProps = {};

  static propTypes = {
    checkAccount : PropTypes.func.isRequired,
    onSubmit : PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      step: 0,
      loading : false,
      value: {
        account : '',
        password : '',
        rePasswd : '',
        companyName : '',
        nickname : '',
        corporateEntityName : '',
        taxid : '',
        disable: false
      },
    };
  }

  formChange = (value) => {
    value = {
      ...this.state.value,
      ...value,
    }
    this.setState({ value });
  };

  checkAccount = async(rule, values, callback, stateValues) => {
    if(!values){
      callback('请输入管理账号');
    } else if (values.length < 5) {
      callback('管理账号名称太短');
    } else {
      let flag = false
      try { flag = await this.props.checkAccount(values) } catch (error) { }
      if(flag){ callback(flag);  }else{ callback() }
    }
  };

  checkPasswd = (rule, values, callback) => {
    if (!values) {
      callback('请输入初始密码');
    } else if (values.length < 5) {
      callback('密码必须大于5位');
    } else if (values.length > 16) {
      callback('密码必须小于16位');
    } else {
      callback();
    }
  };

  checkPasswd2 = (rule, values, callback, stateValues) => {
    if(!values){
      callback('请输入确认密码');
    }else if (values !== stateValues.password) {
      callback('两次输入密码不一致');
    } else {
      callback();
    }
  };

  nextStep = () => {
    if(this.state.loading){ return }
    this.setState({ loading : true })
    let validate = (error, value) => {
      if (!error || error.length === 0) {
        this.setState({ step: this.state.step + 1 });
      }
      this.setState({ loading : false })
    }
    switch (this.state.step) {
      case 0:
        this.refs.form0.validateAll(validate)
        break;
      case 1:
         this.refs.form1.validateAll(validate)
        break;
      case 2:
         this.refs.form2.validateAll(validate)
        break;
    }
  };


  submitForm = async() => {
    if(this.state.loading){ return }
    this.setState({ loading : true })
    let flag = false
    try {
      flag = await this.props.onSubmit({
        ...this.state.value,
        disable : false
      })
    } catch (error) { }
    if(flag){
      Feedback.toast.success('提交成功');
    }else{
      Feedback.toast.error('提交失败');
    }
    this.setState({ loading : false })
  };

  render() {
    return (
      <div className="simple-fluency-form" style={styles.container}>
        <IceContainer>
          <Step current={this.state.step} type="circle">
            <Step.Item key={1} title="填写帐号信息" />
            <Step.Item key={2} title="填写公司信息" />
            <Step.Item key={3} title="填写联系信息" />
          </Step>
        </IceContainer>
        

        <IceContainer style={this.state.step === 0 ? styles.form :  {display :'none'}}>
          <IceFormBinderWrapper value={this.state.value} onChange={this.formChange} ref="form0">
            <div>
              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>管理帐号:</Col>
                <Col s="14" l="12">
                  <IceFormBinder required max={50} validator={(rule, values, callback) =>
                      this.checkAccount(rule,values,callback,this.state.value)
                    }>
                    <Input size="large" name="account" placeholder="请输入管理帐号" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="account" /> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>密码:</Col>
                <Col s="14" l="12">
                  <IceFormBinder required validator={this.checkPasswd}>
                    <Input style={{ width: '100%' }} name="password" htmlType="password" size="large" placeholder="请输入初始密码"/>
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="password" /> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>确认密码:</Col>
                <Col s="14" l="12">
                  <IceFormBinder required validator={(rule, values, callback) =>
                      this.checkPasswd2(rule, values, callback, this.state.value)
                    }>
                    <Input style={{ width: '100%' }} name="rePasswd" htmlType="password" size="large" placeholder="两次输入密码保持一致"/>
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="rePasswd" /> </div>
                </Col>
              </Row>

              <Row>
                <Col offset={7}>
                  <Button onClick={this.nextStep} loading={this.state.loading} disabled={this.state.loading} type="primary"> 下一步 </Button>
                </Col>
              </Row>
            </div>
          </IceFormBinderWrapper>
        </IceContainer>


        <IceContainer style={this.state.step === 1 ? styles.form :  {display :'none'}}>
          <IceFormBinderWrapper value={this.state.value} onChange={this.formChange} ref="form1">
            <div>
              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>企业名称:</Col>
                <Col s="14" l="12">
                  <IceFormBinder name="companyName" required max={50} message="企业名称必填">
                    <Input size="large" placeholder="请输入企业名称" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="companyName"/> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>企业简称:</Col>
                <Col s="14" l="12">
                  <IceFormBinder max={50} name="nickname">
                    <Input size="large" placeholder="请输入企业简称" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="nickname"/> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>企业法人:</Col>
                <Col s="14" l="12">
                  <IceFormBinder required name="corporateEntityName" max={50} message="企业法人必填">
                    <Input size="large" placeholder="请输入企业法人" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="corporateEntityName"/> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>纳税编号:</Col>
                <Col s="14" l="12">
                  <IceFormBinder required name="taxid" max={50} message="纳税编号必填">
                    <Input size="large" placeholder="请输入纳税编号" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="taxid" /> </div>
                </Col>
              </Row>

              <Row>
                <Col offset={7}>
                  <Button onClick={this.nextStep} loading={this.state.loading} disabled={this.state.loading} type="primary"> 下一步 </Button>
                </Col>
              </Row>
            </div>
          </IceFormBinderWrapper>
        </IceContainer>


        <IceContainer style={this.state.step === 2 ? styles.form :  {display :'none'}}>
          <IceFormBinderWrapper value={this.state.value} onChange={this.formChange} ref="form2">
            <div>
              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>公司地址:</Col>
                <Col s="14" l="12">
                  <IceFormBinder required name="address" max={200} message="公司地址必填">
                    <Input size="large" placeholder="请输入公司地址" style={{ width: '100%' }} multiple="true"/>
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="address" /> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>联系电话:</Col>
                <Col s="14" l="12">
                  <IceFormBinder name="phone" max={50}>
                    <Input size="large" placeholder="请输入联系电话" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="phone" /> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>联系邮箱:</Col>
                <Col s="14" l="12">
                  <IceFormBinder name="email" max={50} type="email">
                    <Input size="large" placeholder="请输入联系邮箱" style={{ width: '100%' }} />
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="email" /> </div>
                </Col>
              </Row>

              <Row style={styles.formRow}>
                <Col xxs="5" s="5" l="7" style={styles.formLabel}>备注:</Col>
                <Col s="14" l="12">
                  <IceFormBinder name="memo" max={200}>
                    <Input size="large" placeholder="请输入备注" style={{ width: '100%' }} multiple="true"/>
                  </IceFormBinder>
                  <div style={styles.formErrorWrapper}> <IceFormError name="memo" /> </div>
                </Col>
              </Row>

              <Row>
                <Col offset={7}>
                  <Button onClick={this.submitForm} loading={this.state.loading} disabled={this.state.loading} type="primary"> 提交 </Button>
                </Col>
              </Row>
            </div>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  container : {
    width : '960px',
    margin : '0 auto',
  },
  form: {
    padding: '40px 20px',
  },
  formLabel: {
    textAlign: 'right',
    lineHeight: '1.7rem',
    paddingRight: '10px',
  },
  formRow: {
    marginBottom: '20px',
  },
  formErrorWrapper: {
    marginTop: '5px',
  },
  simpleFluencyForm: {},
};
